<template>
  <el-dialog
    v-model="dialogVisible"
    title="调度计划执行"
    width="1400px"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div class="dispatch-execute">
      <!-- 计划信息 -->
      <div class="plan-info">
        <el-card shadow="never" class="info-card">
          <template #header>
            <div class="card-header">
              <span>计划信息</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="info-item">
                <span class="label">计划名称：</span>
                <span class="value">{{ dispatchData.planName }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span class="label">调度类型：</span>
                <el-tag :type="getTypeTagType(dispatchData.dispatchType)" size="small">
                  {{ getTypeText(dispatchData.dispatchType) }}
                </el-tag>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span class="label">优先级：</span>
                <el-tag :type="getPriorityTagType(dispatchData.priority)" size="small">
                  {{ getPriorityText(dispatchData.priority) }}
                </el-tag>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span class="label">执行状态：</span>
                <el-tag :type="getStatusTagType(executionStatus)" size="small">
                  {{ getStatusText(executionStatus) }}
                </el-tag>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>

      <!-- 执行控制面板 -->
      <div class="control-panel">
        <el-card shadow="never" class="control-card">
          <template #header>
            <div class="card-header">
              <span>执行控制</span>
            </div>
          </template>
          <div class="control-content">
            <div class="control-buttons">
              <el-button
                type="success"
                size="large"
                :disabled="executionStatus !== 'pending'"
                @click="startExecution"
              >
                <el-icon><VideoPlay /></el-icon>
                开始执行
              </el-button>
              <el-button
                type="warning"
                size="large"
                :disabled="executionStatus !== 'executing'"
                @click="pauseExecution"
              >
                <el-icon><VideoPause /></el-icon>
                暂停执行
              </el-button>
              <el-button
                type="primary"
                size="large"
                :disabled="executionStatus !== 'paused'"
                @click="resumeExecution"
              >
                <el-icon><VideoPlay /></el-icon>
                继续执行
              </el-button>
              <el-button
                type="danger"
                size="large"
                :disabled="executionStatus === 'pending' || executionStatus === 'completed'"
                @click="stopExecution"
              >
                <el-icon><Close /></el-icon>
                停止执行
              </el-button>
            </div>
            
            <div class="execution-info">
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="info-item">
                    <span class="label">执行人：</span>
                    <span class="value">{{ executionInfo.executor || '系统自动' }}</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <span class="label">开始时间：</span>
                    <span class="value">{{ formatDateTime(executionInfo.startTime) }}</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <span class="label">已执行时长：</span>
                    <span class="value">{{ formatDuration(executionInfo.elapsedTime) }}</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <span class="label">预计剩余：</span>
                    <span class="value">{{ formatDuration(executionInfo.remainingTime) }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 执行进度概览 -->
      <div class="progress-overview">
        <el-card shadow="never" class="progress-card">
          <template #header>
            <div class="card-header">
              <span>执行进度概览</span>
            </div>
          </template>
          <div class="progress-content">
            <div class="progress-bar">
              <el-progress
                :percentage="overallProgress"
                :status="overallProgress === 100 ? 'success' : ''"
                :stroke-width="12"
                text-inside
              />
            </div>
            
            <div class="progress-stats">
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="stat-item">
                    <div class="stat-number">{{ progressStats.total }}</div>
                    <div class="stat-label">总步骤</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-item success">
                    <div class="stat-number">{{ progressStats.completed }}</div>
                    <div class="stat-label">已完成</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-item warning">
                    <div class="stat-number">{{ progressStats.running }}</div>
                    <div class="stat-label">执行中</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-item info">
                    <div class="stat-number">{{ progressStats.pending }}</div>
                    <div class="stat-label">待执行</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 执行步骤详情 -->
      <div class="steps-detail">
        <el-card shadow="never" class="steps-card">
          <template #header>
            <div class="card-header">
              <span>执行步骤详情</span>
            </div>
          </template>
          <div class="steps-timeline">
            <el-timeline>
              <el-timeline-item
                v-for="(step, index) in executionSteps"
                :key="index"
                :type="getStepTimelineType(step.status)"
                :icon="getStepIcon(step.status)"
                size="large"
              >
                <div class="step-content">
                  <div class="step-header">
                    <h4>{{ step.name }}</h4>
                    <div class="step-actions">
                      <el-tag :type="getStepTagType(step.type)" size="small">
                        {{ getStepTypeText(step.type) }}
                      </el-tag>
                      <el-tag :type="getStepStatusTagType(step.status)" size="small" style="margin-left: 8px">
                        {{ getStepStatusText(step.status) }}
                      </el-tag>
                    </div>
                  </div>
                  
                  <div class="step-info">
                    <el-row :gutter="20">
                      <el-col :span="8">
                        <div class="info-item">
                          <span class="label">负责人：</span>
                          <span class="value">{{ step.responsible }}</span>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="info-item">
                          <span class="label">预计时长：</span>
                          <span class="value">{{ step.estimatedTime }} 分钟</span>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="info-item">
                          <span class="label">是否必需：</span>
                          <el-tag :type="step.required ? 'danger' : 'info'" size="small">
                            {{ step.required ? '必需' : '可选' }}
                          </el-tag>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                  
                  <div v-if="step.description" class="step-description">
                    <span class="label">步骤描述：</span>
                    <span class="value">{{ step.description }}</span>
                  </div>
                  
                  <div v-if="step.conditions" class="step-conditions">
                    <span class="label">执行条件：</span>
                    <span class="value">{{ step.conditions }}</span>
                  </div>
                  
                  <!-- 执行进度 -->
                  <div v-if="step.status === 'running'" class="step-progress">
                    <div class="progress-info">
                      <span class="label">执行进度：</span>
                      <span class="value">{{ step.progress || 0 }}%</span>
                    </div>
                    <el-progress
                      :percentage="step.progress || 0"
                      :stroke-width="6"
                      style="margin-top: 8px"
                    />
                  </div>
                  
                  <!-- 执行结果 -->
                  <div v-if="step.status === 'completed' || step.status === 'failed'" class="step-result">
                    <div class="result-info">
                      <span class="label">执行结果：</span>
                      <span class="value" :class="step.status">{{ step.result }}</span>
                    </div>
                    <div v-if="step.completedTime" class="completed-time">
                      完成时间：{{ formatDateTime(step.completedTime) }}
                    </div>
                  </div>
                  
                  <!-- 操作按钮 -->
                  <div class="step-operations">
                    <el-button
                      v-if="step.type === 'manual-confirm' && step.status === 'running'"
                      type="success"
                      size="small"
                      @click="completeManualStep(step, index)"
                    >
                      手动完成
                    </el-button>
                    <el-button
                      v-if="step.status === 'pending' && !step.required"
                      type="info"
                      size="small"
                      @click="skipStep(step, index)"
                    >
                      跳过步骤
                    </el-button>
                  </div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </div>

      <!-- 执行日志 -->
      <div class="execution-logs">
        <el-card shadow="never" class="logs-card">
          <template #header>
            <div class="card-header">
              <span>执行日志</span>
              <div class="header-actions">
                <el-button size="small" @click="refreshLogs">
                  <el-icon><Refresh /></el-icon>
                  刷新
                </el-button>
                <el-button size="small" @click="exportLogs">
                  <el-icon><Download /></el-icon>
                  导出
                </el-button>
              </div>
            </div>
          </template>
          <div class="logs-content">
            <div class="log-list">
              <div
                v-for="(log, index) in executionLogs"
                :key="index"
                class="log-item"
                :class="log.level"
              >
                <div class="log-time">{{ formatDateTime(log.timestamp) }}</div>
                <div class="log-level">
                  <el-tag :type="getLogLevelTagType(log.level)" size="small">
                    {{ getLogLevelText(log.level) }}
                  </el-tag>
                </div>
                <div class="log-message">{{ log.message }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="exportExecutionReport">
          导出执行报告
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  VideoPlay,
  VideoPause,
  Close,
  Refresh,
  Download,
  CircleCheck,
  Clock,
  Warning,
  Loading
} from '@element-plus/icons-vue'

interface Props {
  visible: boolean
  dispatchData: any
}

interface Emits {
  (e: 'update:visible', value: boolean): void
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  dispatchData: () => ({})
})

const emit = defineEmits<Emits>()

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 执行状态
const executionStatus = ref('pending') // pending, executing, paused, completed, cancelled

// 执行信息
const executionInfo = ref({
  executor: '张三',
  startTime: '',
  elapsedTime: 0,
  remainingTime: 0
})

// 执行步骤
const executionSteps = ref([])

// 执行日志
const executionLogs = ref([])

// 定时器
let executionTimer: NodeJS.Timeout | null = null
let logTimer: NodeJS.Timeout | null = null

// 初始化步骤
const initializeSteps = () => {
  if (props.dispatchData.steps) {
    executionSteps.value = props.dispatchData.steps.map((step, index) => ({
      ...step,
      status: 'pending',
      progress: 0,
      result: '',
      completedTime: ''
    }))
  }
}

// 总体进度
const overallProgress = computed(() => {
  if (!executionSteps.value.length) return 0
  const completedSteps = executionSteps.value.filter(step => step.status === 'completed').length
  return Math.round((completedSteps / executionSteps.value.length) * 100)
})

// 进度统计
const progressStats = computed(() => {
  const total = executionSteps.value.length
  const completed = executionSteps.value.filter(step => step.status === 'completed').length
  const running = executionSteps.value.filter(step => step.status === 'running').length
  const pending = executionSteps.value.filter(step => step.status === 'pending').length
  
  return { total, completed, running, pending }
})

// 开始执行
const startExecution = async () => {
  try {
    await ElMessageBox.confirm('确认开始执行调度计划？', '确认操作', {
      type: 'warning'
    })
    
    executionStatus.value = 'executing'
    executionInfo.value.startTime = new Date().toISOString()
    executionInfo.value.elapsedTime = 0
    
    // 添加开始日志
    addLog('info', '调度计划开始执行')
    
    // 开始执行第一个步骤
    executeNextStep()
    
    // 启动定时器
    startTimers()
    
    ElMessage.success('调度计划已开始执行')
  } catch {
    // 用户取消
  }
}

// 暂停执行
const pauseExecution = async () => {
  try {
    await ElMessageBox.confirm('确认暂停执行？', '确认操作', {
      type: 'warning'
    })
    
    executionStatus.value = 'paused'
    stopTimers()
    addLog('warning', '调度计划执行已暂停')
    ElMessage.success('执行已暂停')
  } catch {
    // 用户取消
  }
}

// 继续执行
const resumeExecution = () => {
  executionStatus.value = 'executing'
  startTimers()
  addLog('info', '调度计划执行已恢复')
  ElMessage.success('执行已恢复')
}

// 停止执行
const stopExecution = async () => {
  try {
    await ElMessageBox.confirm('确认停止执行？停止后无法恢复。', '确认操作', {
      type: 'error'
    })
    
    executionStatus.value = 'cancelled'
    stopTimers()
    
    // 将所有未完成的步骤标记为取消
    executionSteps.value.forEach(step => {
      if (step.status === 'pending' || step.status === 'running') {
        step.status = 'cancelled'
        step.result = '执行已取消'
      }
    })
    
    addLog('error', '调度计划执行已停止')
    ElMessage.success('执行已停止')
  } catch {
    // 用户取消
  }
}

// 执行下一个步骤
const executeNextStep = () => {
  if (executionStatus.value !== 'executing') return
  
  const nextStep = executionSteps.value.find(step => step.status === 'pending')
  if (!nextStep) {
    // 所有步骤完成
    completeExecution()
    return
  }
  
  nextStep.status = 'running'
  nextStep.progress = 0
  addLog('info', `开始执行步骤: ${nextStep.name}`)
  
  // 模拟步骤执行
  simulateStepExecution(nextStep)
}

// 模拟步骤执行
const simulateStepExecution = (step) => {
  if (step.type === 'manual-confirm') {
    // 手动确认步骤，等待用户操作
    addLog('warning', `步骤 "${step.name}" 需要手动确认`)
    return
  }
  
  const duration = step.estimatedTime * 60 * 1000 // 转换为毫秒
  const interval = duration / 100 // 每1%的时间间隔
  
  const progressTimer = setInterval(() => {
    if (executionStatus.value !== 'executing' || step.status !== 'running') {
      clearInterval(progressTimer)
      return
    }
    
    step.progress += 1
    
    if (step.progress >= 100) {
      clearInterval(progressTimer)
      completeStep(step)
    }
  }, interval)
}

// 完成步骤
const completeStep = (step) => {
  step.status = 'completed'
  step.progress = 100
  step.result = '执行成功'
  step.completedTime = new Date().toISOString()
  
  addLog('success', `步骤 "${step.name}" 执行完成`)
  
  // 继续执行下一个步骤
  setTimeout(() => {
    executeNextStep()
  }, 1000)
}

// 手动完成步骤
const completeManualStep = (step, index) => {
  ElMessageBox.confirm(`确认完成步骤 "${step.name}"？`, '手动确认', {
    type: 'info'
  }).then(() => {
    completeStep(step)
  }).catch(() => {
    // 用户取消
  })
}

// 跳过步骤
const skipStep = (step, index) => {
  ElMessageBox.confirm(`确认跳过步骤 "${step.name}"？`, '跳过确认', {
    type: 'warning'
  }).then(() => {
    step.status = 'skipped'
    step.result = '步骤已跳过'
    step.completedTime = new Date().toISOString()
    
    addLog('warning', `步骤 "${step.name}" 已跳过`)
    
    // 继续执行下一个步骤
    setTimeout(() => {
      executeNextStep()
    }, 1000)
  }).catch(() => {
    // 用户取消
  })
}

// 完成执行
const completeExecution = () => {
  executionStatus.value = 'completed'
  stopTimers()
  addLog('success', '调度计划执行完成')
  ElMessage.success('调度计划执行完成！')
}

// 启动定时器
const startTimers = () => {
  // 执行时间计时器
  executionTimer = setInterval(() => {
    if (executionStatus.value === 'executing') {
      executionInfo.value.elapsedTime += 1
      
      // 计算预计剩余时间
      const totalEstimatedTime = executionSteps.value.reduce((sum, step) => sum + (step.estimatedTime || 0), 0) * 60
      const completedTime = executionSteps.value
        .filter(step => step.status === 'completed')
        .reduce((sum, step) => sum + (step.estimatedTime || 0), 0) * 60
      
      executionInfo.value.remainingTime = Math.max(0, totalEstimatedTime - completedTime)
    }
  }, 1000)
  
  // 日志生成定时器
  logTimer = setInterval(() => {
    if (executionStatus.value === 'executing') {
      generateRandomLog()
    }
  }, 5000)
}

// 停止定时器
const stopTimers = () => {
  if (executionTimer) {
    clearInterval(executionTimer)
    executionTimer = null
  }
  if (logTimer) {
    clearInterval(logTimer)
    logTimer = null
  }
}

// 添加日志
const addLog = (level: string, message: string) => {
  executionLogs.value.unshift({
    timestamp: new Date().toISOString(),
    level,
    message
  })
  
  // 限制日志数量
  if (executionLogs.value.length > 100) {
    executionLogs.value = executionLogs.value.slice(0, 100)
  }
}

// 生成随机日志
const generateRandomLog = () => {
  const messages = [
    '监测水位数据更新',
    '闸门状态检查正常',
    '流量数据采集完成',
    '系统运行状态良好',
    '参数调整执行中',
    '设备响应正常'
  ]
  
  const randomMessage = messages[Math.floor(Math.random() * messages.length)]
  addLog('info', randomMessage)
}

// 刷新日志
const refreshLogs = () => {
  addLog('info', '日志已刷新')
  ElMessage.success('日志已刷新')
}

// 导出日志
const exportLogs = () => {
  ElMessage.success('日志导出功能开发中...')
}

// 导出执行报告
const exportExecutionReport = () => {
  ElMessage.success('执行报告导出功能开发中...')
}

// 处理关闭
const handleClose = () => {
  if (executionStatus.value === 'executing') {
    ElMessageBox.confirm('调度计划正在执行中，确认关闭？', '确认关闭', {
      type: 'warning'
    }).then(() => {
      stopTimers()
      dialogVisible.value = false
    }).catch(() => {
      // 用户取消
    })
  } else {
    stopTimers()
    dialogVisible.value = false
  }
}

// 获取类型标签类型
const getTypeTagType = (type: string) => {
  const typeMap = {
    'flood-control': 'danger',
    'water-supply': 'primary',
    'power-generation': 'warning',
    'ecological': 'success',
    'comprehensive': 'info'
  }
  return typeMap[type] || 'info'
}

// 获取类型文本
const getTypeText = (type: string) => {
  const textMap = {
    'flood-control': '防洪调度',
    'water-supply': '供水调度',
    'power-generation': '发电调度',
    'ecological': '生态调度',
    'comprehensive': '综合调度'
  }
  return textMap[type] || type
}

// 获取优先级标签类型
const getPriorityTagType = (priority: string) => {
  const typeMap = {
    'low': 'info',
    'medium': 'warning',
    'high': 'danger',
    'urgent': 'danger'
  }
  return typeMap[priority] || 'info'
}

// 获取优先级文本
const getPriorityText = (priority: string) => {
  const textMap = {
    'low': '低',
    'medium': '中',
    'high': '高',
    'urgent': '紧急'
  }
  return textMap[priority] || priority
}

// 获取状态标签类型
const getStatusTagType = (status: string) => {
  const typeMap = {
    'pending': 'info',
    'executing': 'warning',
    'completed': 'success',
    'paused': 'info',
    'cancelled': 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap = {
    'pending': '待执行',
    'executing': '执行中',
    'completed': '已完成',
    'paused': '已暂停',
    'cancelled': '已取消'
  }
  return textMap[status] || status
}

// 获取步骤时间线类型
const getStepTimelineType = (status: string) => {
  const typeMap = {
    'completed': 'success',
    'running': 'warning',
    'pending': 'info',
    'failed': 'danger',
    'skipped': 'info',
    'cancelled': 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取步骤图标
const getStepIcon = (status: string) => {
  const iconMap = {
    'completed': CircleCheck,
    'running': Loading,
    'pending': Clock,
    'failed': Warning,
    'skipped': Clock,
    'cancelled': Close
  }
  return iconMap[status] || Clock
}

// 获取步骤标签类型
const getStepTagType = (type: string) => {
  const typeMap = {
    'water-level': 'primary',
    'flow-control': 'success',
    'gate-operation': 'warning',
    'pump-operation': 'info',
    'monitoring': 'success',
    'manual-confirm': 'danger'
  }
  return typeMap[type] || 'info'
}

// 获取步骤类型文本
const getStepTypeText = (type: string) => {
  const textMap = {
    'water-level': '水位调节',
    'flow-control': '流量控制',
    'gate-operation': '闸门操作',
    'pump-operation': '泵站启停',
    'monitoring': '监测检查',
    'manual-confirm': '人工确认'
  }
  return textMap[type] || type
}

// 获取步骤状态标签类型
const getStepStatusTagType = (status: string) => {
  const typeMap = {
    'completed': 'success',
    'running': 'warning',
    'pending': 'info',
    'failed': 'danger',
    'skipped': 'info',
    'cancelled': 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取步骤状态文本
const getStepStatusText = (status: string) => {
  const textMap = {
    'completed': '已完成',
    'running': '执行中',
    'pending': '待执行',
    'failed': '执行失败',
    'skipped': '已跳过',
    'cancelled': '已取消'
  }
  return textMap[status] || status
}

// 获取日志级别标签类型
const getLogLevelTagType = (level: string) => {
  const typeMap = {
    'info': 'primary',
    'success': 'success',
    'warning': 'warning',
    'error': 'danger'
  }
  return typeMap[level] || 'info'
}

// 获取日志级别文本
const getLogLevelText = (level: string) => {
  const textMap = {
    'info': '信息',
    'success': '成功',
    'warning': '警告',
    'error': '错误'
  }
  return textMap[level] || level
}

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '-'
  return new Date(dateTime).toLocaleString('zh-CN')
}

// 格式化持续时间
const formatDuration = (seconds: number) => {
  if (!seconds) return '0秒'
  
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60
  
  if (hours > 0) {
    return `${hours}小时${minutes}分钟${secs}秒`
  } else if (minutes > 0) {
    return `${minutes}分钟${secs}秒`
  } else {
    return `${secs}秒`
  }
}

// 监听对话框显示状态
watch(dialogVisible, (visible) => {
  if (visible) {
    initializeSteps()
    executionStatus.value = 'pending'
    executionInfo.value = {
      executor: '张三',
      startTime: '',
      elapsedTime: 0,
      remainingTime: 0
    }
    executionLogs.value = []
    addLog('info', '调度计划执行对话框已打开')
  } else {
    stopTimers()
  }
})

// 组件挂载
onMounted(() => {
  // 初始化
})

// 组件卸载
onUnmounted(() => {
  stopTimers()
})
</script>

<style scoped>
.dispatch-execute {
  max-height: 800px;
  overflow-y: auto;
}

.plan-info,
.control-panel,
.progress-overview,
.steps-detail,
.execution-logs {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.info-item {
  margin-bottom: 12px;
}

.info-item .label {
  font-weight: 500;
  color: #666;
}

.info-item .value {
  color: #333;
  margin-left: 8px;
}

.control-content {
  padding: 20px 0;
}

.control-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  justify-content: center;
}

.execution-info {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.progress-content {
  padding: 20px 0;
}

.progress-bar {
  margin-bottom: 30px;
}

.progress-stats {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.stat-item {
  text-align: center;
  padding: 15px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #e4e7ed;
}

.stat-item.success {
  border-color: #67c23a;
  background-color: #f0f9ff;
}

.stat-item.warning {
  border-color: #e6a23c;
  background-color: #fdf6ec;
}

.stat-item.info {
  border-color: #909399;
  background-color: #f4f4f5;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.steps-timeline {
  max-height: 500px;
  overflow-y: auto;
  padding: 20px;
}

.step-content {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.step-header h4 {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.step-actions {
  display: flex;
  gap: 8px;
}

.step-info {
  margin-bottom: 15px;
}

.step-description,
.step-conditions {
  margin-bottom: 15px;
}

.step-description .label,
.step-conditions .label {
  font-weight: 500;
  color: #666;
}

.step-description .value,
.step-conditions .value {
  color: #333;
}

.step-progress {
  margin-bottom: 15px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.step-result {
  margin-bottom: 15px;
}

.result-info {
  margin-bottom: 8px;
}

.result-info .value.completed {
  color: #67c23a;
}

.result-info .value.failed {
  color: #f56c6c;
}

.completed-time {
  font-size: 12px;
  color: #666;
}

.step-operations {
  display: flex;
  gap: 10px;
}

.logs-content {
  max-height: 300px;
  overflow-y: auto;
}

.log-list {
  padding: 10px;
}

.log-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  border-left: 3px solid #e4e7ed;
  background-color: #f8f9fa;
}

.log-item.info {
  border-left-color: #409eff;
}

.log-item.success {
  border-left-color: #67c23a;
}

.log-item.warning {
  border-left-color: #e6a23c;
}

.log-item.error {
  border-left-color: #f56c6c;
}

.log-time {
  width: 150px;
  font-size: 12px;
  color: #666;
  flex-shrink: 0;
}

.log-level {
  width: 60px;
  flex-shrink: 0;
  margin: 0 10px;
}

.log-message {
  flex: 1;
  color: #333;
}

.dialog-footer {
  text-align: right;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-timeline-item__content) {
  padding-bottom: 30px;
}

:deep(.el-progress-bar__outer) {
  background-color: #f0f2f5;
}
</style>